<script setup lang="ts">
  import { ref, computed } from 'vue';
  import { Avatar, Popover } from '@arco-design/web-vue';
  import IconMenu from '/@/assets/home/menu.svg';
  import { useDisconnect } from 'vagmi';
  import { useUserStore } from '/@/store/modules/user';
  import UserModal from './UserModal.vue';
  import { RouterLink } from 'vue-router';

  interface UserProfileProps {
    isWhiteBg: boolean;
  }
  const props = withDefaults(defineProps<UserProfileProps>(), {
    isWhiteBg: false,
  });

  const { disconnectAsync } = useDisconnect();
  const userStore = useUserStore();
  const userInfo = computed(() => userStore.getUserInfo);
  const visibleRef = ref(false);

  function openModal() {
    visibleRef.value = true;
  }

  async function logout() {
    await userStore.logout();
    await disconnectAsync();
  }
</script>

<template>
  <a-button
    type="primary"
    class="bg-[#5F70FF] rounded-[3px] w-[95px]"
    v-if="!userInfo"
    @click="openModal"
    >Login</a-button
  >
  <Popover v-if="userInfo" position="br">
    <!-- <RouterLink
      class="inline-block"
      :class="{ '!bg-[#E9ECED]': props.isWhiteBg }"
      to="/settings/profile"
    > -->
    <a-row
      class="h-[35px] w-[80px] bg-white/[0.5] profile rounded-[4px]"
      :class="{ '!bg-[#E9ECED]': props.isWhiteBg }"
    >
      <a-col :span="14" class="text-center">
        <Avatar
          class="w-[28px] h-[28px] mt-[3px] ml-[3px] rounded-full drop-shadow"
          :imageUrl="userInfo?.icon"
        />
      </a-col>
      <a-col :span="10">
        <img class="w-[14px] mt-[12px]" :src="IconMenu" />
      </a-col>
    </a-row>
    <!-- </RouterLink> -->
    <template #content>
      <div class="space-y-[6px] w-[180px]">
        <a-row>
          <a-col :span="6"> <Avatar :imageUrl="userInfo?.icon" /></a-col>
          <a-col :span="18" class="mt-[10px] font-[600]">{{ userInfo?.name }}</a-col>
        </a-row>
        <a-row class="text-center pt-[10px] pb-[10px] border-b border-b-[#f1f1f1]">
          <a-col :span="8">
            <div class="text-[15px] font-[700]">{{ userInfo?.focus }}</div>
            <div>关注</div>
          </a-col>
          <a-col :span="8">
            <div class="text-[15px] font-[600]">{{ userInfo?.recommend }}</div>
            <div>赞过</div>
          </a-col>
          <a-col :span="8">
            <div class="text-[15px] font-[600]">{{ userInfo?.recommend }}</div>
            <div>收藏</div>
          </a-col>
        </a-row>
        <a-row class="pt-[10px]">
          <a-col :span="12">
            <a-row>
              <a-col :span="2" :offset="1"> <icon-user class="#8a919f" /></a-col>
              <a-col :span="21">
                <div class="text-[#252933] ml-[13px]">我的主页</div>
              </a-col>
            </a-row>
          </a-col>
          <a-col :span="12">
            <a-row>
              <a-col :span="2" :offset="1"> <icon-gift class="#8a919f" /></a-col>
              <a-col :span="21">
                <div class="text-[#252933] ml-[13px]">会员中心</div>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
        <a-row class="pt-[10px] pb-[10px] border-b border-b-[#f1f1f1]">
          <a-col :span="12">
            <a-row>
              <a-col :span="2" :offset="1"> <icon-message class="#8a919f" /> </a-col>
              <a-col :span="21">
                <div class="text-[#252933] ml-[13px]">我的收藏</div>
              </a-col>
            </a-row>
          </a-col>
          <a-col :span="12">
            <a-row>
              <a-col :span="2" :offset="1"> <icon-calendar class="#8a919f" /> </a-col>
              <a-col :span="21">
                <div class="text-[#252933] ml-[13px]">我的足迹</div>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
        <a-row class="pt-[5px]">
          <a-col :span="12" class="text-left">
            <RouterLink class="inline-block" to="/settings/profile">
              <div type="text" @click="logout" class="text-[##909090] text-[12px]">我的设置</div>
            </RouterLink>
          </a-col>
          <a-col :span="12" class="text-right">
            <div @click="logout" class="text-[##909090] text-[12px]">退出登录</div>
          </a-col>
        </a-row>
        <!-- <div class="flex flex-col space-y-[6px]">
          <RouterLink :to="`/user/${userInfo.id}`">我的主页</RouterLink>
          <RouterLink to="/user/center/signin">成长福利</RouterLink>
          <RouterLink to="/vip">会员中心</RouterLink>
        </div>
        <div class="flex items-center justify-between">
          <RouterLink to="setting">我的设置</RouterLink>
          <Button type="text" @click="logout">退出登录</Button>
        </div> -->
      </div>
    </template>
  </Popover>
  <UserModal v-model:visible="visibleRef" />
</template>

<style scoped>
  .profile {
    backdrop-filter: blur(2px);
  }
</style>
